<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物流程</title>
</head>
<body>
<input type="button" value="开始购物" id="start"/>

<input type="button" value="进入下一个表单" id="next"/>

<p>待办任务列表:<select id="tasks"></select></p>
<fieldset>
    <legend>表单</legend>
    <form id="form"></form>
</fieldset>
</body>

<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $("#start").click(function () {
        $.get("../start",{},function (data) {
           if(data){
               $("#form").empty();
               $.get("../taskForm",{},function (data) {
                   $("#form").html(data);
                   var $submit = $("<p><input type='button' value='提交' onclick='submitForm()'/></p>");
                   console.log(data);
                   if(data!=null) {
                       $("#form").append($submit);
                   }
               })
           } else{
               alert("启动失败！");
           }
        });
    });

    function submitForm() {
        $.get("../submitForm",$("#form").serialize(),function (data) {
            if(data){
                $("#form").empty();
                $.get("../taskForm",{},function (data) {
                    $("#form").html(data);
                    var $submit = $("<p><input type='button' value='提交' onclick='submitForm()'/></p>");
                    console.log(data);
                    if(data!=null) {
                        $("#form").append($submit);
                    }
                })
            }else{
                alert("提交失败！");
            }
        })
    }

    $("#next").click(function () {
        $("#form").empty();
        $.get("../taskForm",{},function (data) {
            $("#form").html(data);
            var $submit = $("<p><input type='button' value='提交' onclick='submitForm()'/></p>");
            console.log(data);
            if(data!=null) {
                $("#form").append($submit);
            }
        })
    });

    $.get("../getTasks",{},function (data) {
       for(var i=0;i<data.length;i++){
           if(i==0){
               var taskId = data[0];
               console.log(taskId);
               $.get("../taskFormById",{taskId:taskId},function (data) {
                   $("#form").html(data);
                   var $submit = $("<p><input type='button' value='提交' onclick='submitById()'/></p>");
                   var $taskId = $("<input type='hidden' name='taskId' value='"+taskId+"'/>")
                   console.log(data);
                   if(data!=null) {
                       $("#form").append($taskId);
                       $("#form").append($submit);
                   }
               });
           }
           $("#tasks").append($("<option>"+data[i]+"</option>"))
       }
    });

    $("#tasks").change(function () {
        $("#form").empty();
        var taskId = $(this).val();
        $.get("../taskFormById",{taskId:taskId},function (data) {
            $("#form").html(data);
            var $submit = $("<p><input type='button' value='提交' onclick='submitById()'/></p>");
            var $taskId = $("<input type='hidden' name='taskId' value='"+taskId+"'/>")
            console.log(data);
            if(data!=null) {
                $("#form").append($taskId);
                $("#form").append($submit);
            }
        });
    });


    function submitById() {
        $.get("../submitFormById",$("#form").serialize(),function (data) {
            if(data){
                $("#form").empty();
                // location.reload();
            }else{
                alert("提交失败！");
            }
        });
    }
</script>
</html>